<template>
  <view
    class="mask"
    :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''"
    @click="toggleMask"
  >
    <view class="mask-content" @click.stop.prevent="stopPrevent">
      <view class="mask-content-input">
        <view class="textarea">
          <textarea
            v-model="content"
            :placeholder="placeholder"
            :cursor-spacing="140"
            :show-confirm-bar="false"
            :focus="focus"
            @input="descInput"
            :maxlength="400"
          ></textarea>
          <view class="font_num">
            <span class="xianzhi">{{ remnant }}/400</span>
          </view>
        </view>
      </view>
      <view class="mask-content-topbar">
        <u-checkbox v-model="checked" :activeColor="globPrimaryColor">公开</u-checkbox>
        <view class="fabu" @click="pubComment()">发布</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ygcComment',
  //属性
  props: {
    placeholder: {
      type: String,
    },
  },
  data() {
    return {
      maskState: 0,
      content: '',
      focus: false,
      checked: true,

      remnant: 400,
      KeyboardHeight: '',
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  // #ifndef H5
  mounted() {
    uni.onKeyboardHeightChange((res) => {
      this.KeyboardHeight = res.height
    })
  },
  // #endif
  methods: {
    //限制字数
    descInput() {
      var txtVal = this.content.length
      this.remnant = 400 - txtVal
    },
    stopPrevent() {},
    toggleMask(type) {
      let timer = type === 'show' ? 10 : 300
      let state = type === 'show' ? 1 : 0
      // this.maskState = 2;
      setTimeout(() => {
        this.maskState = state
        // #ifdef APP-PLUS
        if (uni.getSystemInfoSync().platform == 'ios') {
          this.focus = this.maskState ? true : false
        }
        // #endif
        // #ifndef APP-PLUS
        this.focus = this.maskState ? true : false
        // #endif
      }, timer)
    },
    pubComment() {
      var status = this.checked == true ? 1 : 0
      var obj = {
        desc: this.content,
        status: status,
      }
      this.$emit('pubComment', obj)
      this.content = ''
      this.remnant = 400
    },
  },
}
</script>

<style lang="scss" scoped>
$font-color-base: #606266;
$base-color: #5a9bec;

.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: 0.3s;
  -webkit-transition: 0.3s;

  .mask-content {
    /* #ifndef H5 || APP-PLUS */
    position: fixed;
    /* #endif */

    width: 100%;
    background: #ffffff;
    transform: translateY(100%);
    transition: 0.3s; //底部弹出的持续时间
    -webkit-transition: 0.3s; //底部弹出的持续时间
    // overflow-y:scroll;
    display: flex;
    flex-direction: column;

    .mask-content-topbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20upx 30upx 10upx;
      font-size: 32upx;

      .left {
        padding: 10upx 0upx;
        color: $font-color-base;
      }

      .right {
        padding: 10upx 100upx;
        border-radius: 6upx;
        color: #ffffff;
        font-weight: 500;
        background-color: $base-color;
      }
    }

    .mask-content-input {
      // width: 718upx;
      width: 100%;
      overflow: hidden;

      .textarea {
        height: 190rpx;
        width: 690rpx;
        margin: 42rpx auto 42rpx;
        border: 1px solid #e4e7ed;
        padding: 24rpx 10rpx 8rpx 24rpx;
        border-radius: 8rpx;

        textarea {
          width: 100%;
          height: 110rpx;
        }

        .font_num {
          height: 32rpx;
          width: 100%;
          text-align: right;

          .xianzhi {
            font-size: 24rpx;
            color: #909399;
          }
        }
      }
    }
  }

  &.none {
    display: none;
  }

  &.show {
    background: rgba(0, 0, 0, 0.4);

    .mask-content {
      transform: translateY(0);
    }
  }
}
</style>
